<template>
  <div class="MiniLogin">
    <x-gantt data-id="index" :data="dataList" @move-slider="onMoveSlider">
      <x-gantt-column label="式样" prop="carStyle" />
      <x-gantt-column label="车号" prop="carNo" />
      <x-gantt-column label="车辆型号" prop="carType" />
      <x-gantt-column label="车辆代号" prop="carCode" />
      <x-gantt-column label="车辆信息">
        <x-gantt-column label="VIN" prop="carVin" />
        <x-gantt-column label="ENG" prop="carEng" />
      </x-gantt-column>
      <x-gantt-column label="轮胎规格" prop="carTyre" />
      <x-gantt-column label="" prop="" width="0"/>
      <XGanttSlider prop="startDate" bg-color="orange" :move="true" :resize-left="true" :resize-right="true">
        <template v-slot:content="{ row, $index, level }">
          <div :style="{ backgroundColor: '#f60', color: '#fff', borderRadius: '4px' }"> {{ row.name }} </div>
        </template>
      </XGanttSlider>
    </x-gantt>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  const dataList = ref<object[]>([
    {
      index: 0,
      startDate: new Date(2024, 3, 25),
      endDate: new Date(2024, 3, 25),
      carStyle: '汽油国6M15B',
      carNo: 'E301',
      carType: 'TV7156NM',
      carCode: 'MZEA11L-GEFNZC',
      carVin: 'LFMAL1CC8K0000027',
      carEng: '0000157',
      carTyre: '195/65R15',
      name: 'MT试验ECU改写（FTRD）',
    },
    {
      index: 1,
      startDate: new Date(2024, 3, 20),
      endDate: new Date(2024, 3, 25),
      carStyle: '汽油国6M15B',
      carNo: 'E302',
      carType: 'TV7156NM',
      carCode: 'MZEA11L-GEFNZC',
      carVin: 'LFMAL1CC5K0000017',
      carEng: '0000158',
      carTyre: '195/65R15',
      name: 'MT磨合ECU改写（FTRD）',
    },
    {
      index: 2,
      startDate: new Date(2024, 3, 25),
      endDate: new Date(2024, 3, 25),
      carStyle: '汽油国6M15B',
      carNo: 'E301',
      carType: 'TV7156NM',
      carCode: 'MZEA11L-GEFNZC',
      carVin: 'LFMAL1CC8K0000027',
      carEng: '0000157',
      carTyre: '195/65R15',
      name: 'MT试验ECU改写（FTRD）',
    },
    {
      index: 3,
      startDate: new Date(2024, 3, 20),
      endDate: new Date(2024, 3, 25),
      carStyle: '汽油国6M15B',
      carNo: 'E302',
      carType: 'TV7156NM',
      carCode: 'MZEA11L-GEFNZC',
      carVin: 'LFMAL1CC5K0000017',
      carEng: '0000158',
      carTyre: '195/65R15',
      name: 'MT磨合ECU改写（FTRD）',
    },
    {
      index: 4,
      startDate: new Date(2024, 3, 25),
      endDate: new Date(2024, 3, 25),
      carStyle: '汽油国6M15B',
      carNo: 'E301',
      carType: 'TV7156NM',
      carCode: 'MZEA11L-GEFNZC',
      carVin: 'LFMAL1CC8K0000027',
      carEng: '0000157',
      carTyre: '195/65R15',
      name: 'MT试验ECU改写（FTRD）',
    },
    {
      index: 5,
      startDate: new Date(2024, 3, 20),
      endDate: new Date(2024, 3, 25),
      carStyle: '汽油国6M15B',
      carNo: 'E302',
      carType: 'TV7156NM',
      carCode: 'MZEA11L-GEFNZC',
      carVin: 'LFMAL1CC5K0000017',
      carEng: '0000158',
      carTyre: '195/65R15',
      name: 'MT磨合ECU改写（FTRD）',
    },
  ]);
  const onMoveSlider = (data) => {
    console.log(data[0].row);
  };
</script>
<style scoped>
  /* @import url(); 引入css类 */
</style>
